<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;" v-if="show_flag">
    <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;">
      <view class="flex flex-direction bg-white list" v-for="(item,index) in page_main_data" :key="index" @click="handleToArticle(item.article.id, item.article.type)">
        <image :src="item.article && item.article.img_arr[0]" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
        <view class="flex flex-direction" style="padding: 20upx;">
          <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">{{item.article && item.article.title}}
          </view>
          <view class="flex align-center" style="width: 100%; height: 40upx; margin: 7% 0;">
            <view class="flex justify-center align-center tag">{{item.article && item.article.category}}</view>
            <view>
              <image src="/static/icon/index/dianzan@2x.png" style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
            </view>
            <view style="color: #999999; font-size: 24upx;">{{ item.article && item.article.zan_num }}</view>
          </view>
          <view v-if="item.product" style="margin-bottom: 7%;">
            <view v-if="item.product.sale_price == '0.00'" style="font-size: 28upx; color: #D8D8D8; font-weight: bold;">免费</view>
            <view v-else style="font-size: 28upx; color: #E52718; font-weight: bold;">¥{{item.product.sale_price}}</view>
          </view>
          <view class="flex align-center">
            <image :src="item.article && item.article.user && item.article.user.avatar" mode="aspectFill" style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
            <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
              {{item.article && item.article.user && item.article.user.nick_name}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="page_main_data.length == 0" class="justify-center align-center"
          style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="page_main_data.length >=15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {numSwitch} from "utils/wxUtil";
import {zan_getListByCon} from "api/like/like"
export default {
  data(){
    return {
      bottom_flag: true, //触底标识
      page: 1, //分页
      page_main_data: [], //页面数据
      is_load: true, //加载
      show_flag: false,
    }
  },
  methods:{
    pageInit(page = 1, type){
      this.is_load = false;
      this.page = page;
      let user_info = uni.getStorageSync('user_info')
      zan_getListByCon({page, user_id: user_info.id}).then(res=>{
        console.log(JSON.stringify(res))
        if(type){
          this.page_main_data = [];
        }
        let temp_data = res.data.data;
        if(temp_data.length == 0){
          this.bottom_flag = false;
        }else {
          temp_data.forEach(item=>{
            if(item.article){
              item.article.zan_num = this.computeNum(item.article.zan_num)
            }
            this.page_main_data.push(item);
          })
        }
        this.is_load = true;
        this.show_flag = true;
      })
    },
    computeNum: numSwitch,
    //去文章页
    handleToArticle(article_id, type){
      const jump_url_obj = {
        article: '/pages/article/article',
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail',
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id
        }
      })
    },
  },
  onShow(){
    this.pageInit(1, 1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.bottom_flag = true;
    this.page = 1;
    this.pageInit(1,1);
    uni.stopPullDownRefresh();
  }

}
</script>

<style lang="less" scoped>

.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-top: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}
</style>
